
	import { Vue, Component } from 'vue-property-decorator'
	import PageContainer from '@/moduleC/components/layout/PageContainer.vue'
	import { api } from '@/moduleC/api'
	import store from '@/moduleC/store'


	@Component({
		components: {
			PageContainer
		}
	})
	export default class OrderDetails extends Vue {
		private greenRatio = 10
		private orangeRatio = 90
		private isDragging = false
		private progressBarLeft = 0
		private progressBarWidth = 0

		onLoad() {
			// Use uni-app's selector query instead of document.querySelector
			const query = uni.createSelectorQuery().in(this);
			query.select('.progress-bar')
				.boundingClientRect((data: UniNamespace.NodeInfo | null) => {
					if (data) {
						this.progressBarLeft = data.left ?? 0;
						this.progressBarWidth = data.width ?? 0;
					}
				})
				.exec();
		}

		goBack() {
			uni.navigateBack({ delta: 1 })
		}
		handleSubmit() {
			// 处理提交逻辑
			// uni.setStorageSync('_greenRatio',this.greenRatio);
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
		}
		touchStart(e: TouchEvent) {
			this.isDragging = true;
		}
		touchMove(e: TouchEvent) {
			if (!this.isDragging) return;
		
			const touch = e.touches[0];
			const x = touch.clientX - this.progressBarLeft;
			let ratio = Math.round((x / this.progressBarWidth) * 100);
		
			// 限制比例范围在0-100之间
			ratio = Math.max(0, Math.min(100, ratio));
		
			// 设置最小间隔为5%
			ratio = Math.round(ratio / 1) *1;
		
			this.greenRatio = ratio;
			this.orangeRatio = 100 - ratio;
		}
		touchEnd(e: TouchEvent) {
			this.isDragging = false;
		}
	}